<template>
    <div>
        <van-nav-bar title="修改密码" left-arrow @click-left="backUp"></van-nav-bar>
        <div class="login">
            <van-cell-group>
                <van-field
                        v-model="data.oldPwd"
                        type="password"
                        label="旧密码"
                        placeholder="请输入密码"
                        required
                        clearable
                        :error-message="errorMsg.oldPwd"
                />
                <van-field
                        v-model="data.newPwd"
                        type="password"
                        label="新密码"
                        placeholder="请输入密码"
                        required
                        clearable
                        :error-message="errorMsg.newPwd"
                />
                <van-field
                        required
                        type="tel"
                        placeholder="请输入手机号码"
                        label="手机号码"
                        v-model="memberInfo.mobile"
                        :error-message="errorMsg.mobile"
                        readonly
                        clearable
                ></van-field>
                <van-field
                        center
                        v-model="data.vCode"
                        label="短信验证码"
                        placeholder="请输入验证码"
                        :error-message="errorMsg.code"
                        required
                        clearable
                >
                    <van-button
                            slot="button"
                            size="small"
                            type="danger"
                            :disabled="countdown > 0"
                            @click="sendMobileCode"
                    >{{ countdown ? countdown + 's' : '发送'}}
                    </van-button>
                </van-field>
                <!-- <van-field
                  v-model="data.password"
                  type="password"
                  label="确认密码"
                  placeholder="再次请输入密码"
                  required
                  clearable
                  :error-message="errorMsg.password"
                />-->
            </van-cell-group>
            <van-button block type="danger" @click="submit">提交</van-button>
        </div>
    </div>
</template>
<script>
    import api from "@/utils/restful.js";
    import {Field, Icon, Button, Cell, CellGroup, NavBar, Toast} from "vant";
    import validator from "@/utils/validation.js"; //引进token解析模块
    import axios from "axios";
    // import jwt_decode from 'jwt-decode';
    export default {
        name: "pwdchange",
        components: {
            [Field.name]: Field,
            [Icon.name]: Icon,
            [Button.name]: Button,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [NavBar.name]: NavBar,
            [Toast.name]: Toast
        },
        data() {
            return {
                countdown: 0,
                memberInfo: {},
                data: {
                    oldPwd: "",
                    newPwd: "",
                    vCode: ""
                    // password: ""
                },
                errorMsg: {
                    oldPwd: "",
                    newPwd: ""
                    // password: ""
                },
                rules: {
                    oldPwd: [
                        {required: true, message: "密码不能为空", trigger: "blur"},
                        {min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur"}
                    ],
                    newPwd: [
                        {required: true, message: "密码不能为空", trigger: "blur"},
                        {min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur"}
                    ]
                }
            };
        },
        mounted() {
            this.loadMemberInfo();
        },
        methods: {
            backUp() {
                this.$router.go(-1);
            },
            loadMemberInfo() {
                this.$axios({
                    method: "post",
                    url: api.memberInfo,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    console.log(res);
                    this.memberInfo = res.data;
                });
            },
            submit() {
                const instance = axios.create({});
                this.validate((errors, fields) => {
                    console.log(errors, fields);
                    if (!errors) {
                        instance({
                            method: "post",
                            url: api.changePwd,
                            data: this.$qs.stringify({
                                token: localStorage.getItem("token"),
                                oldPassword: this.data.oldPwd,
                                password: this.data.newPwd,
                                vCode: this.data.vCode
                            })
                        }).then(res => {
                            console.log(res.data);
                            this.$toast(res.data.msg);
                        });
                    }
                });
            },
            sendMobileCode() { //发送手机验证码
                this.validate(errors => {
                    if (!errors) {
                        this.countdown = 60;
                        this.countdownSubtract();
                    }
                }, "mobile");
                this.$axios({
                    method: "post",
                    url: api.pwdChangeVCode,
                    params: {
                        mobile: this.memberInfo.mobile
                    }
                }).then(res => {
                    Toast(res.msg);
                });
            },
            countdownSubtract() {
                if (this.countdown > 0) {
                    setTimeout(() => {
                        this.countdown -= 1;
                        this.countdownSubtract();
                    }, 1000);
                }
            },
            resetField(attrs) {
                attrs = !attrs
                    ? Object.keys(this.errorMsg)
                    : Array.isArray(attrs)
                        ? attrs
                        : [attrs];
                attrs.forEach(attr => {
                    this.errorMsg[attr] = "";
                });
            },
            validate(callback, data) {
                this.validator.validate((errors, fields) => {
                    this.resetField();
                    if (errors) {
                        fields.forEach(item => {
                            this.errorMsg[item.field] = item.message;
                        });
                    }
                    callback && callback(errors, fields);
                }, data);
            }
        },
        created() {
            this.validator = validator(this.rules, this.data);
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .login {
        background-color: @borderColor;
        // border: 1px solid red;
        height: 100vh;

        .van-cell-group {
            padding: 0 20px;
        }
    }

    /deep/ .van-button {
        margin: 0 auto;
        margin-top: 30%;
        width: 90%;
        border-radius: 20px !important;
    }
</style>